window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    // 鼠标经过
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block'
        big.style.display = 'block'
    });
    // 鼠标离开
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none'
        big.style.display = 'none'
    });
    // 鼠标移动 ,让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // 计算鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 减去盒子自身高度的一半，就让鼠标居中显示在盒子里
        maskX = x - mask.offsetWidth / 2 
        maskY = y - mask.offsetHeight / 2

        // 控制盒子移动范围 如果X小于0就 = 0
        // 大盒子的宽度减去小盒子的宽度
        maskMaxX = preview_img.offsetWidth - mask.offsetWidth //遮罩层的最大移动距离
        // 大盒子的高度减去小盒子的高度
        maskMaxY = preview_img.offsetHeight - mask.offsetHeight
        if (maskX <= 0) {
            maskX = 0
        } else if (maskX >= maskMaxX) {
            maskX = maskMaxX
        }
        if (maskY <= 0) {
            maskY = 0
        } else if (maskY >= maskMaxY) {
            maskY = maskMaxY
        }
        mask.style.left = maskX + 'px'
        mask.style.top = maskY + 'px'
        // 大图片的移动距离 = 遮挡层的移动距离 * 大图片最大的移动距离 /遮挡层最大的移动距离
        var bigImg = document.querySelector('.bigImg') //大图

        var bigMaxX = bigImg.offsetWidth - big.offsetWidth;//大图片最大的移动距离 
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        // 大图片的移动距离 X Y 遮挡层的移动距离 * 图片在大盒子的最大距离  / 遮挡层的最大距离
        var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = maskY * bigMaxY / maskMaxY;
        bigImg.style.left = -bigX + 'px'
        bigImg.style.top = -bigY + 'px'
    })














})